<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>251-原生弹窗dialog</title>
    <style>
      /* 弹窗样式美化 */
      #dag {
        border-radius: 4px;
        border: 1px solid #f1f1f1;
      }
      #dag::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>

  <body>
    <p>
      <a href="https://www.douyin.com/video/7362091656612449545" target="_blank"> 文章参考 </a>
      <br />
      <a href="https://blog.csdn.net/weixin_46837985/article/details/118384305" target="_blank">
        更多使用方式-过渡动画等参考【图解直到今天也没什么人知道的原生dialog标签（非常详细）】
      </a>
    </p>
    <p>原生弹窗的优点：1.层级高，始终会出现在页面上，2.好用^_^</p>
    <button onclick="dag.show()">打开弹窗</button>
    <button onclick="dag.showModal()">打开带蒙层的弹窗</button>
    <dialog id="dag">
      <label for="title">
        <span>标题：</span>
        <input type="text" name="title" placeholder="请输入标题" />
      </label>
      <br />
      <label for="address">
        <span>地址：</span>
        <input type="text" name="address" placeholder="请输入地址" />
      </label>
      <p>
        <button onclick="dag.close()">关闭</button>
      </p>
    </dialog>
  </body>
</html>
